@require '~styles/variables'
@require '~styles-lib/mixins'

.chat-user
	height: 50px
	overflow: hidden

	&:hover
		.chat-user-moderate-action
			opacity: 1

	&-list-meta
		text-overflow()
		theme-prop('color', 'fg-muted')
		font-size: $font-size-small

	&-moderate
		float: right
		margin-top: 2px

		&-moderate-action
			display: inline-block
			opacity: 0

	&-role
		float: none !important
		margin-left: 0 !important
		margin-right: 5px !important
		margin-top: 0 !important

	&-role + &-role
		margin-left: -5px !important

	.user-avatar
		position: relative

		img
			img-circle()
			display: inline-block
			width: 25px
			vertical-align: middle

		.chat-user-status
			position: absolute
			right: 10px
			bottom: 8px
			width: 12px
			height: 12px
			border: 2px solid rgb(25, 25, 25)
			border-radius: 100%

			&.online
				change-bg('highlight')

			&.in-game
				change-bg('fg')

			&.offline
				change-bg('bg-offset')
